<template>
	<div class="archives_patrolinfo_info">
		<div>
			<Table
				:tableData="tableData"
				:tableHead="tableHead"
				:isUseSlot="false"
				:page="listQuery.page"
				:limit="listQuery.limit"
				v-loading="listLoading"
			>
				<template slot="tool" slot-scope="{ data }">
					<el-button
						style="padding:3px;"
						icon="el-icon-document"
						@click="handleEdit(data.row)"
						type="text"
						>编辑</el-button
					>
					<el-button
						style="color:red;padding:3px;"
						icon="el-icon-delete"
						type="text"
						@click="delet(data.row)"
						>删除</el-button
					>
				</template>
			</Table>
			<Pagination
				v-show="total > 0"
				:total="total"
				:page.sync="listQuery.page"
				:limit.sync="listQuery.limit"
				@pagination="getList"
			></Pagination>
		</div>
		<form-tem
			:info="{ title: '巡检仪信息', width: '70%', top: '5%' }"
			:formList="formList"
			@submit="submit"
			@close="closeDialog"
			ref="formDelg"
			:dialogFormVisible.sync="dialogFormVisible"
		>
		</form-tem>
	</div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import formTem from "@/template/form.temp";
import {
	getPatrolList,
	insertPatro,
	updatePatro,
	getPatroInfo,
} from "@/api/RCIM/RCIM-archives";
import Table from "@/components/Table";
import control from "../mixins/control";
import { getDeviceManufacturer } from "@/api/RCIM/RCIM-select";
import { cloneDeep } from "lodash";
import { deletePatro } from '@/api/RCIM/RCIM-delet';
import { validateFormNumber } from "@/utils/validateForm";
export default {
	components: {
		Table,
		Pagination,
		formTem
	},
	mixins: [control],
	name: "archives_patrolinfo_info",
	data() {
		return {
			tableData: [],
			tableHead: [
				{
					prop: "MN",
					label: "MN号",
					align: "left"
				},
				{
					prop: "brand",
					label: "品牌",
					align: "left"
				},
				{
					prop: "operate",
					label: "操作",
					align: "center"
				}
			],
			total: 1,
			listQuery: {
				page: 1,
				limit: 10
			},
			listLoading: false,
			dialogFormVisible: false,
			formList: [
				{
					list: [
						{
							type: "input",
							label: "MN号",
							width: "33%",
							labelWidth: "140px",
							placeholder: "",
							moduleKey: "MN",
							maxlength: "20",
							showWordLimit: true,
							validate: function() {
								return [
									{
										required: true,
										message: "请输入MN号",
										trigger: "blur"
									}
								];
							}
						},
						{
							type: "select",
							label: "品牌",
							labelWidth: "140px",
							width: "34%",
							labelWidth: "140px",
							placeholder: "",
							moduleKey: "brand",
							children: "option",
							options: [],
							fetch: getDeviceManufacturer,
							// validate: function() {
							// 	return [
							// 		{
							// 			required: true,
							// 			message: "请选择品牌",
							// 			trigger: "change"
							// 		}
							// 	];
							// }
						},
						{
							type: "input",
							label: "电子围栏半径(米)",
							labelWidth: "140px",
							width: "33%",
							placeholder: "",
							moduleKey: "placeRadius",
							validate: function() {
								return [
									{ validator: validateFormNumber, trigger: "blur" }
								];
							}
						},
					]
				}
			],
			search: "",
			editInfo: {}
		};
	},
	mounted() {
		this.listQuery.id = this.entData.id;
		this.getList();
	},
	methods: {
		/**
		 * @desc 删除数据
		 * @param {Object} row 表格行数据
		 */
		delet(row){
			this.$confirm('确认要删除吗？')
				.then(_ => {
					deletePatro(row.id).then(res => {
						if(res.code === 200){
							this.getList()
							return this.$message({
								type: "success",
								message: "删除成功"
							})
						}
						return this.$message({
							type: "error",
							message: "删除失败"
						})
					})
				})
				.catch(_ => {});
		},
		/**
		 * @desc 获取数据
		 */
		async getList() {
			this.listLoading = true;
			const { data } = await getPatrolList(this.listQuery);
			this.total = data.total;
			this.tableData = data.patrolList;
			this.listLoading = false;
		},
		/**
		 * @desc 编辑查看表格数据
		 * @param {Object} row 表格行数据
		 */
		handleEdit(row) {
			this.$refs.formDelg.openDialog();
			this.editInfo = row;
			getPatroInfo({id: row.id}).then(res => {
				// debugger
			})
			this.$nextTick(() => {
				const parent = this.$refs.formDelg
					.getFormEle()
					.forEach(item => {
						item[0].setDefaultValue(row);
					});
			});
		},
		// closeDialog() {
		// 	this.dialogFormVisible = false;
		// },
		/**
		 * @desc 处理表单数据
		 * @param {Object} formData 表单数据
		 */
		formateForm(formData) {
			const result = cloneDeep(formData);
			result.enterpriseId = this.entData.id;
			return result;
		},
		/**
		 * @desc 初始化表单数据
		 * @param {Object} val 表单数据
		 */
		initShowDetail(val) {
			if (val) {
				let data = {
					id: "",
					SCYinstallPlace: "",
					brand: "",
					MN: "",
					factoryNo: "",
					installPlace: "",
					HiSto: "",
					placeRadius: "",
					status: ""
				};
				const parent = this.$refs.formDelg
					.getFormEle()
					.forEach(item => {
						item[0].setDefaultValue(data);
					});
			}
		},
		/**
		 * @desc 新增、编辑数据
		 * @param {Object} formData 表单数据
		 */
		submit(formData) {
			const params = this.formateForm(formData);
			if (this.editInfo.id) {
				this.update(formData);
			} else {
				insertPatro(params).then(res => {
					this.fresh();
					if (res.code === 200) {
						this.dialogFormVisible = false;
						return this.$message({
							type: "success",
							message: "添加成功"
						});
					}
					return this.$message({
						type: "success",
						message: "添加失败"
					});
				});
			}
		},
		/**
		 * @desc 编辑数据
		 * @param {Object} params 表单数据
		 */
		update(params) {
			params.id = this.editInfo.id;
			updatePatro(params).then(res => {
				this.fresh();
				if (res.code === 200) {
					this.dialogFormVisible = false;
					return this.$message({
						type: "success",
						message: "修改成功"
					});
				}
				return this.$message({
					type: "success",
					message: "修改失败"
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.archives_patrolinfo_info {
}
</style>
